<template>
  <div class="capital-statistics">
    <div
      class="capital-statistics__inner"
    >
      <div
        class="capital-statistics__cell"
        :class="{'is-active': currentIndex === index}"
        v-for="(item, index) in nav"
        @click="currentIndex = index"
      >
        <div
          class="capital-statistics__title"
        >{{item.title}}</div>
        <div
          class="capital-statistics__amount"
        >
          <tween-number :value="_result(fetchData, `${item.prop}[0]`)" :is-filter="item.filter === 'currency'"></tween-number>
        </div>
        <div
          class="capital-statistics__sub-amount"
        >
          <tween-number :value="_result(fetchData, `${item.prop}[1]`)" :is-filter="item.filter === 'currency'"></tween-number>
        </div>
      </div>
    </div>
    <single-line
      :title="currentTabInfo.title"
      :list="lineList"
    ></single-line>
  </div>
</template>

<script>

  import SingleLine from '../components/single-line';

  import {getCommand} from '@/build';

  export default {
    name: "capital-statistics",

    props: ['type', 'isNewReg', 'nav', 'api', 'filter'],

    components: {
      SingleLine
    },

    mixins: [getCommand],

    data() {
      return {
        currentIndex: 0,
        fetchData: [],
        lineList: [],
      };
    },

    watch: {
      currentTabInfo: {
        handler(tabInfo) {
          this.$nextTick(() => {
            this.fetchStatisticsData(tabInfo);
          });
        },
        immediate: true
      },
    },

    computed: {
      currentTabInfo() {
        return this.nav[this.currentIndex];
      }
    },

    methods: {
      fetchStatisticsData(tabInfo) {
        tabInfo.api({
          isNewReg: this.isNewReg,
          // date: this.type === 2 ? [moment().startOf('month').valueOf(),moment().valueOf()] : [],
          date: this.type === 2 ? [moment().startOf('month').valueOf(),moment().valueOf()] : [moment().startOf('day').valueOf(),moment().valueOf()],
          // date: _.toTimestamp(this.type === 2 ?
          //   {start: [-1, 'month'], end: [0, 'day'], startEnd: false} :
          //   {start: [-1, 'day'], end: [0, 'day'], startEnd: false}
          // ),
        })
          .then(([result, data]) => {
            if (result) {
              this.lineList = data;
            }
          });
      }
    },

    mounted() {
      this.bindGet(this.api, 'fetchData', {
        action: 'funSummary',
        sendingData: {
          type: this.type,
          date: this.type === 2 ? [moment().startOf('month').valueOf(),moment().valueOf()] : [moment().startOf('day').valueOf(),moment().valueOf()],
          isNewReg: this.isNewReg,
        },
      });

      this.getAll();
    },
  };
</script>

<style lang="scss" scoped>
  $--height: 160px !default;

  @include b(capital-statistics) {

    @include e(inner) {
      display: flex;
      border-radius: $--border-radius-base;
      border: $--border-base;
    }

    @include e(cell) {
      flex: 1 0 0;
      height: $--height;
      border-right: $--border-base;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      padding-top: 30px;
      cursor: pointer;
      @include utils-transition-normal();


      @include when(active) {
        color: $--color-white;
        background: $--color-primary;
        border-radius: $--border-radius-base;
        box-shadow:0px 10px 30px 0px rgba(0,0,0,0.18);
      }
    }
    @include e(title) {
      margin-bottom: 20px;
      font-size: $--font-size-small;
    }
    @include e(amount) {
      font-weight: bold;
      margin-bottom: 30px;
    }
    @include e(sub-amount) {
      font-weight: bold;
      color: $--color-info;
    }
  }
</style>
